<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>确认订单</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css" />
      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    	<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
      <link rel="stylesheet" type="text/css" href="../../css/common.css" />
      <style>
          html, body {width: 100%;min-height: 100%;background: #F3EFEE;}
          .aui-active .aui-bar-tab-label{
            color: #f5a51c
          }
          .login {height:240px;background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);/*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/position: relative;}
      	.login .personal_logo {width: 4rem;height: 4rem;border-radius: 50%;margin: 0 auto 9px;/*position: absolute; top: 60px; left: 20px;*/}
      		.login .userinfo {position: absolute; top: 60px;text-align: center; left: 0; right: 0;}
      		.login .userinfo .title {font-size: 0.8rem; color: #fff;}

      		/* 设置条目 */
      		.item {height: 3rem;line-height: 3rem;padding-left: 0.7rem;background-color: #fff;}
      		.item_ico {float: left;width: 2.3rem;padding: 0.7rem 0.7rem 0.7rem 0;}
      		.item_arrow {float: right;width: 1.5rem;padding: 1rem 0.7rem 1rem 0;}
      		.item span {font-size: 0.7rem;}
          [v-cloak] {
              display: none;
          }
        #tab1 .aui-active{
          color: #f23030;
          border-bottom: 2px solid #f23030;
        }
        .aui-list-item-middle{
          padding-left: 0.75rem;
        }
        .aui-radio:checked{
          background-color: #f23030;
          border: solid 1px #f23030;
        }
        .aui-toast{
          width: 9.5rem;
          background: #999;
          opacity: 0.7;
          height: 4rem;
          min-height: 4rem;
          line-height: 4rem;
        }
        .aui-toast-content{
          color: #fff;
        }
        .aui_list{
            background-image: linear-gradient(0,#eee,#eee 50%,transparent 50%);
        }
        .aui-list-item{
            background-image:linear-gradient(0,#eee,#eee 50%,transparent 50%) !important;
        }
        .aui-refresh-content {
          min-height: 100vh;
          padding-bottom: 2.5rem;
        }

        .exchangeList_img{
          background:url(../../image/cpimg.jpg) center center/cover no-repeat;
          background-size:100% 100%;
        }
        .exchangeList_right{
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          padding: 0.5rem 0.5rem 0;
        }
        .aui-list.ex .aui-list-item-media{
          width:5rem;
          height:4rem;
          padding-right:1rem;
        }
        .aui-list.ex .aui-list-item-media{
          padding-top:0;
          padding-bottom: 0;
        }
        .exchangeList_right_txt{
          position: relative;
          width:100%;
        }
        .exchangeList_right_bottom{
          position: absolute;
          width: 100%;
          bottom:0;
          left:0;
          line-height: 0.6rem;
        }
        .exchangeList_right_bottom1{
          float:left;
          font-size:0.7rem;
          color:#f23030;
        }
        .exchangeList_right_bottom2{
          float:right;
        }
        .aui-list.ex .aui-list-item-title{
          font-size:0.7rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .aui-list-item-title span{
          color: #f23030
        }
        .evalute_img{
          position: relative;
        }
        .evalute_img span{
          position: absolute;
          top: 50%;
          left: 0.75rem;
          height: 1.4rem;
          margin-top: -0.7rem;
          font-size: 0.9rem;
          color: #fff;
          font-weight: 600;
        }
        .aui-list-item-right .evaluate_btn{
          border: 1px solid #333;
          color: #333;
          padding: 0.1rem 0.5rem;
          border-radius: 0.1rem;
          font-size: 0.7rem;
          text-align: center;
        }
        .aui-media-list-item-inner1{
          border-bottom: 1px solid #eee;
        }
        .duihuan{
          color:#f23030;
          font-size:0.7rem;
        }


        /*其他信息*/
        .other_content{
          background:#fff;
          margin-top: 0.5rem;
          margin-bottom: 0.5rem;
        }
        .other_content ul li{
          position: relative;
          display: flex;
          padding: 0.5rem;
          line-height: 1;
          font-size: 0.75rem;
          justify-content: space-between;
          align-items: center;
        }
        .other_content ul li::after{
          position: absolute;
          content: "";
          bottom: 0;
          right: 0;
          width: calc(100% - 0.5rem);
          height: 1px;
          background: #eee;
        }
        .other_content ul li .title{
          text-align:justify;
          text-align-last:justify;
          width: 25%;
        }
        .other_content ul li .cnt{
          color: #888;
          width: 75%;
          word-break: break-all;
          word-wrap:break-word;
          text-align: right;
        }
      </style>
  </head>
  <body>
    <div id="app"  style="box-sizing:border-box">
          <div class="evalute_img">
            <img src="../../image/evaluate_top_1.png" alt="evaluate_top_1.jpg" width="100%">
            <span>{{info.order_status | status}}</span>
          </div>

          <ul class="aui-list aui-media-list" style="margin-top:10px;">
             <li class="aui-list-item-middle aui-list-item">
                 <div class="aui-media-list-item-inner aui-media-list-item-inner1">
                     <div class="aui-list-item-media" style="width:1.4rem;padding-right:5px">
                         <img :src="info.store_logo" class="aui-list-img-sm order_sm_img">
                     </div>
                     <div class="aui-list-item-inner">
                         <div class="aui-list-item-text">
                             <div class="aui-list-item-title aui-font-size-14">{{info.store_name}}</div>
                         </div>
                     </div>
                 </div>
             </li>
             <li class="aui-list-item-middle aui-list-item apply_main_li" style="padding-bottom:0.7rem;">
               <div class="aui-media-list-item-inner" v-for="item in info.goods" v-if="item.type != 5 ">
                   <div class="aui-list-item-media" style="width: 5rem;" @click="pjOver(item.type,item.goods_id)">
                       <img :src="item.goods_pic" class="aui-list-img-md">
                   </div>
                   <div class="aui-list-item-inner">
                       <div class="aui-list-item-text">
                         <div  class="aui-list-item-title" style="width: 100%;padding-right: 0.2rem;">
                           <div class="aui-font-size-12">{{item.goods_name}}</div>
                           <div class="aui-list-item-text aui-font-size-12">
                             <div class="make_nav_content_div">
                               {{item.sku_info}}
                             </div>
                             <div  class="aui-list-item-right" style="font-size:0.7rem">×{{item.goods_nums}}</div>
                           </div>

                           <div class="aui-list-item-text aui-font-size-18 make_money_tag" style="margin-top:0.4rem">
                             <div class="make_nav_content_div" v-if="item.type == 1">
                               <span class="make_money_tag_text">￥</span>
                               <span style="color:#f23030;">{{item.goods_price}}</span>
                             </div>
                             <div class="make_nav_content_div" v-else-if="item.type == 2">
                               <span class="make_money_tag_text">{{item.goods_price}}分</span>
                             </div>
                             <div class="make_nav_content_div" v-else-if="item.type == 3">
                               <span class="make_money_tag_text">{{item.goods_price}}兑换币</span>
                             </div>
                             <div  class="aui-list-item-right" style="font-size:0.7rem"><div class="evaluate_btn" v-if="item.status == 0 && info.order_status=='4'" @click="openDetail(item, info.o_id,1)">去评价</div></div>
                             <div  class="aui-list-item-right" style="font-size:0.7rem"><div class="evaluate_btn" v-if="item.append_status == 0 && item.status == 1" @click="openDetail(item, info.o_id,2)">追加评价</div></div>
                           </div>

                        </div>
                       </div>
                   </div>
               </div>
               <div>

                 <div class="aui-list ex" v-for="item in info.goods" v-if="item.type == 5 ">
                   <h5>附送赠品</h5>
                   <div class="exchangeList_right">
                     <div class="aui-list-item-media" @click="pjOver(item.type,item.goods_id)">
                         <div :style="'background:url('+item.goods_pic+') no-repeat center/cover;width:100%;height:3rem;'" class="exchangeList_img"></div>
                     </div>
                     <div class="exchangeList_right_txt">
                         <div class="aui-list-item-text">
                             <div class="aui-list-item-title">{{item.goods_name}}</div>
                         </div>
                         <div class="aui-list-item-text">{{item.sku_info}}</div>
                         <div class="exchangeList_right_bottom clearfix">
                             <div class="exchangeList_right_bottom1">赠品</div>
                             <div class="exchangeList_right_bottom2">×{{item.goods_nums}}</div>
                         </div>
                     </div>
                   </div>
                 </div>
               </div>

             </li>
          </ul>

          <div class="other_content">
            <ul>
              <li>
                  <div class="title">邮费：</div>
                  <div class="cnt" style="color:#f23030;">￥{{info.express_fee}}</div>
              </li>
              <li>
                  <div class="title">订单编号：</div>
                  <div class="cnt">{{info.order_no}}</div>
              </li>
              <li>
                  <div class="title">下单时间：</div>
                  <div class="cnt">{{info.order_time}}</div>
              </li>
              <li>
                  <div class="title">买家名称：</div>
                  <div class="cnt">{{info.consignee}}</div>
              </li>
              <li>
                  <div class="title">买家留言：</div>
                  <div class="cnt">{{info.remark1}}</div>
              </li>
              <li>
                  <div class="title">买家电话：</div>
                  <div class="cnt">{{info.telephone}}</div>
              </li>
              <li>
                  <div class="title">收货地址：</div>
                  <div class="cnt">{{info.province}}{{info.city}}{{info.district}}{{info.address}}</div>
              </li>
              <li>
                  <div class="title">总计付款：</div>
                  <div class="cnt" style="color:#f23030;">￥{{info.total_price}}</div>
              </li>
            </ul>
          </div>

    </div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/utils.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript" src="../../script/aui-toast.js"></script>
  <script type="text/javascript">
      apiready = function(){
        // console.log(JSON.stringify(api))
        api.showProgress({
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });
        var app = new Vue({
            el: '#app',
            data: {
              info: {}
            },
            created: function() {
              var $_this = this
              api.ajax({
                  url: window.Url.Freeorder_orderDetails,
                  method: 'post',
                  data: {
                      values: {
                          token: $api.getStorage('token'),
                          orderId: api.pageParam.id
                      }
                  }
              }, function(ret, err) {
                  if (ret) {
                    console.log(JSON.stringify(ret))
                    if(ret.re==1){
                      //  alert(JSON.stringify(ret))
                        $_this.info = ret.data.list
                    }
                  } else {
                      api.alert({msg: JSON.stringify(err)});
                  }
              })


            },
            mounted: function() {
                var $this = this;
                api.hideProgress();
            },
            methods: {
              //详情
              pjOver:function(type,id){
                      api.openWin({
                          name: 'commodity',
                          url: '../one_frame/commodity.html',
                          pageParam: {
                              name:'',
                              id: id
                          }
                      });

              },
              openDetail: function (info, id,val) {
                if(val==1){
                  api.openWin({
                      name: 'order_evaluate_detail',
                      url: './order_evaluate_detail.html',
                      pageParam: {
                          info: info,
                          id: id
                      }
                  });
                }else if(val==2){
                  api.openWin({
                      name: 'order_evaluate_detail_two',
                      url: './order_evaluate_detail_two.html',
                      pageParam: {
                          info: info,
                          id: id
                      }
                  });
                }
              }
            },
            filters: {
              status: function (val) {
                switch (Number(val)) {
                  case 1:
                    return '待付款'
                    break;
                  case 2:
                    return '待发货'
                    break;
                  case 3:
                    return '已发货'
                    break;
                  case 4:
                    return '已完成'
                    break;
                  case 5:
                    return '已关闭'
                    break;
                  case 6:
                    return '退款/售后中'
                    break;
                  case 8:
                    return '订单退货中'
                    break;
                  case 9:
                    return '返仓中'
                    break;
                  case 10:
                    return '已返仓'
                    break;
                  default:
                    return
                }
              }
            }
        })
      };

  </script>
  </html>
